<template>
  <div :class="status ? 'toolbar-top' : 'toolbar-top-1'">
    <div class="toolbar-One" v-for="item in toolListOne" :key="item.code">
      <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top-start">
        <SvgIcon @click="onclick(item.type)" :icon-class="item.icon" />
      </el-tooltip>
    </div>
    <span class="Vertical"> </span>
    <div
      :class="status ? 'toolbar-Two' : 'toolbar-Two-1'"
      v-for="item in toolListTwo"
      :key="item.code"
    >
      <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top-start">
        <SvgIcon @click="onclick(item.type)" :icon-class="item.icon" />
      </el-tooltip>
    </div>
    <span class="Vertical"> </span>
    <div class="toolbar-Three" v-for="item in toolListThree" :key="item.code">
      <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top-start">
        <SvgIcon @click="onclick(item.type)" :icon-class="item.icon" />
      </el-tooltip>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { messageUtil } from '@jl/element-plus/utils';

const status = ref<boolean>(false);
const toolListOne = ref([
  { code: 1, name: '选择', icon: 'ic_选择', type: 'select' },
  { code: 2, name: '框选', icon: 'ic_框选', type: 'box-select' },
]);
const toolListTwo = [
  { code: 1, name: '平移', icon: 'ic_平移', type: 'translation' },
  { code: 2, name: '旋转', icon: 'ic_旋转', type: 'rotate' },
  { code: 3, name: '缩放', icon: 'ic_缩放', type: 'scale' },
  { code: 4, name: '上下位移', icon: 'ic_上下位移', type: 'displacement' },
];
const toolListThree = [
  { code: 1, name: '复制', icon: 'ic_复制', type: 'copy' },
  { code: 2, name: '删除', icon: 'ic_删除', type: 'delete' },
];
const onclick = (type) => {
  if (
    [
      'select',
      'box-select',
      'translation',
      'rotate',
      'scale',
      'displacement',
      'copy',
      'delete',
    ].includes(type)
  ) {
    messageUtil.info('该功能暂未开放');
    return;
  }
};
</script>

<style lang="less" scoped>
.toolbar-top-1 {
  width: 274px;
  height: 42px;
  background: #2e2e2e;
  border-radius: 4px;
  opacity: 0.86;
  position: absolute;
  top: 70px;
  left: 793px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
}
.toolbar-top {
  width: 474px;
  height: 42px;
  background: #2e2e2e;
  border-radius: 4px;
  opacity: 0.86;
  position: absolute;
  top: 70px;
  left: 723px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
  svg {
    color: green;
  }
}
.Vertical {
  width: 1px;
  height: 16px;
  background: #585858;
  border-radius: 1px;
}
.toolbar-One {
  width: 30%;
  display: flex;
  justify-content: space-around;
}
.toolbar-Two {
  width: 50%;
  display: flex;
  justify-content: space-around;
}
.toolbar-Two-1 {
  display: none;
}
.toolbar-Three {
  width: 30%;
  display: flex;
  justify-content: space-around;
}
.svg-icon {
  width: 24px;
  height: 24px;
}
.svg-icon:hover {
  background: black;
}
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>
